<div class="reg-main-container">
  <div nz-row nzGutter="12">
    <div nz-col class="gutter-row" nzSpan="24">
      <div class="gutter-box">
        <nz-card [nzBordered]="false" class="card">
          <div class="search-wrap">
            <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
              <nz-form-item>
                <nz-form-label>关键词</nz-form-label>
                <nz-form-control>
                  <input formControlName="name" nz-input placeholder="关键词"/>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-control>
                  <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
                  <button nz-button nzType="primary" (click)="openFileUploadModal()"><i nz-icon nzType="plus"></i>新增</button>
                </nz-form-control>
              </nz-form-item>
            </form>
          </div>

          <nz-table
            #middleTable
            nzBordered
            nzSize="middle"
            [nzData]="tableData">
            <thead>
            <tr>
              <th>序号</th>
              <th>文件名称</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of middleTable.data">
              <td>{{ data.id }}</td>
              <td>{{ data.name }}</td>
              <td>
                <a (click)="viewFile(data, tplContent)">预览</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                   (nzOnConfirm)="onDelete(data.id)">
                  删除
                </a>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </nz-card>
      </div>

    </div>
  </div>

  <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="660" [(nzVisible)]="fileModalShow" [nzTitle]="fileModalTitle"
            (nzOnCancel)="onFileCancel()" (nzOnOk)="onFileConfirm()">

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="24" style="padding-bottom: 20px;">
        <nz-upload
          nzType="drag"
          nzFileType="application/pdf"
          [(nzFileList)]="fileList"
          (nzChange)="handleChange($event)"
          [nzAction]="uploadUrl"
        >
          <p class="ant-upload-drag-icon">
            <i nz-icon nzType="inbox"></i>
          </p>
          <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
        </nz-upload>
      </div>

    </div>

  </nz-modal>

  <ng-template #tplContent let-params let-ref="modalRef">

    <ng-container *ngIf="fileType === 'pdf'">
      <ngx-extended-pdf-viewer [src]="fileSrc" useBrowserLocale="true" height="700px"></ngx-extended-pdf-viewer>
    </ng-container>
    <ng-container *ngIf="fileType === 'png' || fileType === 'jpg'">
      <div style="width: 1050px;max-height: 800px;overflow: auto">
        <img [src]="fileSrc" alt=""/>
      </div>
    </ng-container>

    <ng-container *ngIf="fileTypeList.indexOf(fileType) < 0">
      <div style="margin: 20px;font-size: 20px">该文件类型无法预览，请下载后自行打开</div>
    </ng-container>

  </ng-template>
</div>
